<template>
  <div class="d-flex justify-center">
    <transition name="opacity">
      <div v-if="isShowCont" class="hitokoto-box">
        <h1 class="hitokoto-cont">{{ body.hitokoto }}</h1>
        <p class="hitokoto-from">
          <span>—— {{ body.from }}</span>
        </p>
      </div>
    </transition>
    <div ref="circle" class="circle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      body: {},
      isShowCont: false
    };
  },
  created() {
    this.updateCont();
    this.printMe();
  },
  methods: {
    updateCont() {
      this.isShowCont = false;
      this.$http.get("https://v1.hitokoto.cn/").then(
        data => {
          this.body = data.body;
          this.hitokoto = this.body.hitokoto;
          this.isShowCont = true;
        },
        err => {
          this.hitokoto = `错误了：${err}`;
          console.log("err", err);
        }
      );
    },
    updateCircle() {
      this.updateCirclePosition();
      if (this.$refs.circle) {
        this.$refs.circle.className = "circle scaleZoom";
        var isUpdateCont = setInterval(() => {
          if (this.isShowCont) {
            this.$refs.circle.className = "circle scaleShow";
            this.isShowCont = !this.isUpdateCont;
          } else {
            clearInterval(isUpdateCont);
          }
        }, 800);
        this.updateCont();
      }
    },
    updateCirclePosition(ev) {
      ev = ev || event;
      var touch = ev.changedTouches ? ev.changedTouches[0] : null;
      if (!touch) {
        this.$refs.circle.style.top =
          ev.clientY - this.$refs.circle.offsetHeight / 2 + "px";
        this.$refs.circle.style.left =
          ev.clientX - this.$refs.circle.offsetWidth / 2 + "px";
      } else {
        this.$refs.circle.style.top =
          ~~touch.pageY - this.$refs.circle.offsetHeight / 2 + "px";
        this.$refs.circle.style.left =
          ~~touch.pageX - this.$refs.circle.offsetHeight / 2 + "px";
      }
    },
    printMe() {
      console.log(
        "%cCoder By 十二SR_ <nmlixa@163.com>",
        "text-shadow: 0 0 10px rgba(0,0,0,0.8); font: 300 5em Simsun,arial,sans-serif"
      );
    }
  }
};
</script>

<style lang="scss">
#app {
  display: flex;
  justify-content: center;
}

.d-flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.opacity-enter-active,
.opacity-leave-active {
  transition: opacity 0.8s;
}
.opacity-enter,
.opacity-leave-to {
  opacity: 0;
}

.hitokoto-box {
  max-width: 1000px;
  padding: 0 20px;
  height: 500px;
  margin: 50px auto;

  .hitokoto-from {
    float: right;
  }

  .hitokoto-cont,
  .hitokoto-from span,
  .hitokoto-from small {
    color: #444;
  }
}

.showContBox {
  animation: showCont 2s;
}

@keyframes scaleZoom {
  from {
    opacity: 1;
  }

  to {
    transform: scale(15);
    opacity: 0;
  }
}

@keyframes scaleShow {
  from {
    transform: scale(0.1);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.circle {
  position: fixed;
  bottom: 15%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, 0), #ccc);
}

.scaleZoom {
  animation: scaleZoom 0.8s;
}

.scaleShow {
  animation: scaleShow 0.3s;
}
</style>
